<template>
  <div class="content">
    <div class="content-menu">
      <van-dropdown-menu active-color="#267ccf">
        <van-dropdown-item v-model="type" :options="biddingContent" @change="change" />
        <van-dropdown-item v-model="searchType" :options="queryType" @change="change" />
      </van-dropdown-menu>
    </div>
    <div class="content-list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list-item" v-for="(item, index) in listData" :key="index">
          <div class="item-title">
            <div class="title-serialNumber">{{ index + 1 }}</div>
            <div class="title-content">{{ item.title }}</div>
          </div>
          <div class="item-body">
            <div>
              <span>发布日期：</span><span>{{ item.publishTime | nullValueFiltration | timeFiltration }}</span>
            </div>
            <div>
              <span>省份地区：</span><span>{{ item.province | nullValueFiltration }}</span>
            </div>
            <div>
              <span>信息类型：</span><span>{{ item.type | nullValueFiltration }}</span>
            </div>
            <div>
              <span>采购人：</span><span>{{ item.purchaser | nullValueFiltration }}</span>
            </div>
            <div>
              <span>供应商：</span><span>{{ item.bidWinner | nullValueFiltration }}</span>
            </div>
            <div>
              <span>中标金额：</span><span>{{ item.bidAmount | nullValueFiltration }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { getBiddingInformation } from "@/api";
import * as _ from "lodash";
import dayjs from "dayjs";
export default {
  name: "ChangeRecord",
  data() {
    return {
      listData: [], //招投标数据
      pageNum: 1, //默认页码
      type: "", //招标内容选项值
      searchType: "", //类型筛选选项值
      loading: false, //加载状态
      finished: false, //加载结束状态
      biddingContent: [
        { text: "全部招标内容", value: "" },
        { text: "招标预告", value: 1 },
        { text: "招标公告", value: 2 },
        { text: "中标结果", value: 4 },
      ], //招标内容筛选条件
      queryType: [
        { text: "全部查询类型", value: "" },
        { text: "标题", value: 1 },
        { text: "采购人", value: 2 },
        { text: "供应商", value: 3 },
      ], //查询类型筛选条件
    };
  },
  props: {
    vantListGather: Object, //组件接收的值
  },
  watch: {
    vantListGather: {
      handler(newVal, oldVal) {
        this.pageNum = 1; //默认页码
        this.type = ""; //招标内容选项值
        this.searchType = ""; //类型筛选选项值
        this.listData = _.cloneDeep(newVal.list);
      },
      deep: true, // 开启深度监听 deep
    },
  },
  methods: {
    /**
     * 根据筛选条件请求招投标信息
     * @returns {Promise<void>}
     */
    async change() {
      this.listData = [];
      const param = {
        companyName: this.$route.query.companyName,
        pageNum: this.pageNum,
        searchType: this.searchType,
        type: this.type,
      };
      const data = await getBiddingInformation(param);
      this.listData = data.items;
    },
    /**
     * 下拉加载
     * @returns {Promise<void>}
     */
    async onLoad() {
      this.pageNum += 1;
      const param = {
        companyName: this.$route.query.companyName,
        pageNum: this.pageNum,
        searchType: this.searchType,
        type: this.type,
      };
      const data = await getBiddingInformation(param);
      this.listData.push(...data.items);
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.listData.length >= data.total) {
        this.finished = true;
      }
    },
  },
  filters: {
    //时间戳转日期
    timeFiltration(value) {
      return dayjs(Number(value)).format("YYYY-MM-DD");
    },
    //值为空改为 “--”
    nullValueFiltration(value) {
      return value === "" ? "--" : value;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: calc(100vh - 630px);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 100px;
  .content-menu {
    margin-bottom: 10px;
    .van-popup--top {
      width: 80%;
      margin: 0 auto;
    }
  }
  .content-list {
    margin: 20px;
    .list-item {
      background-color: #fff;
      border-radius: 20px;
      padding: 24px 16px;
      border-bottom: 2px solid #e0e0e0;
      cursor: pointer;
      .item-title {
        display: flex;
        align-items: center;
        column-gap: 20px;
        .title-serialNumber {
          width: 96px;
          height: 96px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background-color: #429df8;
        }
        .title-content {
          flex: 1;
          font-size: 30px;
        }
      }
    }
    .item-body {
      div {
        padding: 15px 0;
        display: flex;
        align-items: center;
        span {
          font-size: 25px;
          color: #666;
          &:nth-child(1) {
            width: 134px;
          }
          &:nth-child(2) {
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
